// 商品分类
import React, { useState } from 'react'
import {
  Table,
  Image,
  Space,
  Button,
  Modal,
  message,
  Switch,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { TableRowSelection } from 'antd/es/table/interface'
import { ExclamationCircleFilled } from '@ant-design/icons'
import ClassChild from './xiekunchild/ClassChild'
import { useNavigate } from 'react-router-dom'
// 表格
interface DataType {
  key: React.Key
  name: string
  shopNum: string
  money: string
  type: string
}

export default function GoodSubordinate() {
  const navigator = useNavigate()
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
    setSelectedRowKeys(newSelectedRowKeys)
  }
  // 开关
  const onChange = (checked: boolean) => {
    console.log(`switch ====> ${checked}`)
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',
    },
    {
      title: '分类',
      dataIndex: 'type',
    },
    {
      title: '分类图标',
      dataIndex: 'photo',
      render: (_, record) => (
        <Image
          width={70}
          height={50}
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
      ),
    },
    {
      title: '级别',
      dataIndex: 'key',
    },
    {
      title: '商品数量',
      dataIndex: 'shopNum',
    },
    {
      title: '是否上架',
      dataIndex: 'money',
      render: (_, record) => <Switch defaultChecked onChange={onChange} />,
    },
    {
      title: '排序',
      dataIndex: 'type',
    },
    {
      title: '操作',
      dataIndex: 'address',
      render: (_, record) => (
        <Space size="small">
          <Button className="add" onClick={() => redact(record)}>
            编辑
          </Button>
          <Button id="del" onClick={() => showConfirm(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ]

  const data: DataType[] = []
  for (let i = 0; i < 15; i++) {
    data.push({
      key: i + 1,
      name: '探路者2018春夏新品行者裤',
      shopNum: 'HJSI48393',
      money: '119.00 ~ 599.00$',
      type: '冲锋衣',
    })
  }

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = []
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false
            }
            return true
          })
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = []
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true
            }
            return false
          })
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
    ],
  }
  // 操作部分
  // （1）删除
  // 删除弹框
  const { confirm } = Modal
  const showConfirm = (record: any) => {
    confirm({
      title: '提示:',
      icon: <ExclamationCircleFilled />,
      content: '您确定要删除这一行吗？删除后无法恢复！',
      cancelText: '取消',
      okText: '确认',
      onOk() {
        // 点击确定发起请求
        console.log('OK', record)
        message.success('删除成功！')
      },
    })
  }

  //给子组件传的数据
  const [redactList, setRedactList] = useState<object | undefined>()
  // （2）编辑
  const redact = (record: any) => {
    console.log('record', record)
    setRedactList(record)
    setIsModalOpen(true)
  }

  // （2）添加和修改共用弹框
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false) //是否显示对话框
  const [head, setHead] = useState<string | null>(null)
  // 自定义添加修改弹框消失
  const modalClose = () => {
    setIsModalOpen(false)
  }
  return (
    <div>
      {/* 头部标题 */}
      <p className="head">子级分类</p>
      <Table
        style={{ marginTop: '50px' }}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 6 }}
      />
      <ClassChild
        redactList={redactList}
        modalClose={modalClose}
        isModalOpen={isModalOpen}
        head={head}
      ></ClassChild>
    </div>
  )
}

